<template>
    <div>
        <ul class="nav">
            <li v-for="(item,i) in routes" :key="i"><router-link :to="{path:item.path}"><i :class="item.icon"></i><p>{{item.til}}</p></router-link></li>
        </ul>
    </div>
</template>

<script>
import {routes} from "../router"
    export default {
        data() {
            return {
                routes
            }
        },
    }
</script>

<style lang="scss" scoped>
/* div{
    
} */
.nav{
    background: #fff;
    z-index: 999;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    width: 100%;
    li{
      text-align: center;
      flex: 1;
      justify-content: space-between;
      border: 1px solid #e1e1e1;
      line-height: 22px;
      height: 40px;
      padding: 1vh;
    }
    i{
        // height: 10px;
        font-size: 20px;
    }
    .router-link-exact-active{
      color: rgba(255, 102, 49, 1);
    }
}
</style>